<template>
  <footer class="tab-bar is-ios-tab flex-center">
    <div
      v-for="(row, i) in tab"
      :key="i"
      class="tab-item flex-center-center"
      :class="{ show: showTab == i }"
      @click="jump(i)"
    >
      <div v-if="row.showI" class="tab-icon">
        <img v-if="showTab === i" :src="row.showI" alt="" />
        <img v-else :src="row.closeI" alt="" />
      </div>
      <div class="tab-label">
        <p class="content">{{ t(row.title) }}</p>
      </div>
    </div>
  </footer>
</template>
<script setup>
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'

  import nav_c1 from '@/assets/img/tabbar/nav_s1.png'
  import nav_c2 from '@/assets/img/tabbar/nav_s2.png'
  import nav_c3 from '@/assets/img/tabbar/nav_s3.png'
  import nav_c4 from '@/assets/img/tabbar/nav_s4.png'

  import nav1 from '@/assets/img/tabbar/nav1.png'
  import nav2 from '@/assets/img/tabbar/nav2.png'
  import nav3 from '@/assets/img/tabbar/nav3.png'
  import nav4 from '@/assets/img/tabbar/nav4.png'

  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()

  const tab = ref([
    {
      path: '/home',
      showI: nav_c1,
      closeI: nav1,
      title: 'tab.tab1',
      top: 1
    },
    {
      path: '/activity',
      showI: nav_c2,
      closeI: nav2,
      title: 'tab.tab2',
      top: 2
    },
    {
      path: '/team',
      showI: nav_c3,
      closeI: nav3,
      title: 'tab.tab3',
      top: 3
    },
    {
      path: '/mine',
      showI: nav_c4,
      closeI: nav4,
      title: 'tab.tab4',
      top: 4
    }
  ])

  const emit = defineEmits(['jump'])

  const showTab = ref(0)

  const jump = (e) => {
    emit('jump', tab.value[e])
  }

  const router = useRouter()

  watch(
    () => router.currentRoute.value,
    (newValue) => {
      if (newValue.meta.keepAlive && newValue.meta.transition) {
        showTab.value = newValue.meta.transition - 1
      }
    }
  )
</script>
<script>
  export default {
    name: 'TabBar'
  }
</script>
<style lang="scss" scoped>
  .tab-bar {
    height: var(--tab-height);
    width: 100vw;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    background: var(--tab-bg-color);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.29);
    line-height: 1.8;
    .tab-item {
      flex: 1;
      text-align: center;
      margin: 0 10px;
      font-size: 12px;
      flex-direction: column;
      height: var(--tab-height);
      .tab-label {
        .content {
          color: var(--tab-color);
        }
      }
      &.show {
        .tab-label {
          .content {
            color: var(--tab-hover-color);
          }
        }
      }
      .tab-icon {
        width: 20px;
        height: 20px;
        img {
          width: 100%;
        }
      }
    }
  }
</style>
